<template>
    <div class="content">
        <Form ref="formValidate" :model="form" label-position="top">
            <div class="formBox" style="margin-bottom:20px">
                <div class="formBox-item">
                    <FormItem label="单位名称" prop="name" :rules="[{required: true, message: '单位名称不能为空', trigger: 'blur'}]">
                        <Input v-model="form.name" :disabled="!isEdit" maxlength=20 clearable placeholder="请输入单位名称" style="width: 200px">
                        </Input>
                    </FormItem>
                </div>
                <div class="formBox-item">
                    <FormItem label="单位编号" prop="code" :rules="[{required: true, message: '单位编号只能为数字字母', pattern:'^[0-9a-zA-Z]*$', trigger: 'blur'}]">
                        <Input v-model="form.code" :disabled="!isEdit" maxlength=20 clearable placeholder="请输入单位编号" style="width: 200px">
                        </Input>
                    </FormItem>
                </div>
                <div class="formBox-item">
                    <FormItem label="义务兵数" prop="topCode">
                        <InputNumber :max="10" :min="0" v-model="form.num1" style="width:200px" :disabled="!isEdit"></InputNumber>
                    </FormItem>
                </div>
                <div class="formBox-item">
                    <FormItem label="士官人数" prop="topCode">
                        <InputNumber :max="10" :min="0" v-model="form.num1" style="width:200px" :disabled="!isEdit"></InputNumber>
                    </FormItem>
                </div>
                <div class="formBox-item">
                    <FormItem label="干部人数" prop="topCode">
                        <InputNumber :max="10" :min="0" v-model="form.num1" style="width:200px" :disabled="!isEdit"></InputNumber>
                    </FormItem>
                </div>
                <div class="formBox-item">
                    <FormItem label="文员人数" prop="topCode">
                        <InputNumber :max="10" :min="0" v-model="form.num1" style="width:200px" :disabled="!isEdit"></InputNumber>
                    </FormItem>
                </div>
                <div class="formBox-item">
                    <FormItem label="总人数" prop="topCode">
                        <InputNumber :max="10" :min="0" v-model="form.num1" style="width:200px" :disabled="!isEdit"></InputNumber>
                    </FormItem>
                </div>
            </div>
        </Form>
        <div class="formBox">
            <cusButton class="mr_20 mb_20 mt_15" type="primary" @onClick="isEdit = true" v-if="!isEdit">修改</cusButton>
            <cusButton class="mr_20 mb_20 mt_15" @onClick="cancelBtn()" v-if="isEdit">取消</cusButton>
            <cusButton class="mr_20 mb_20 mt_15" type="primary" @onClick="saveBtn" v-if="isEdit">保存</cusButton>
        </div>
    </div>
</template>

<script>
export default {
    components: {  },
    name: "unitPower",
    data() {
        return {
            ruleValidate: {},
            form: {
                name: '', // 单位名称
                code: '', // 单位代码
                num1: 0,
            },
            isEdit: false
        };
    },
    mounted() {
        
    },
    methods: {
        saveBtn() {
            this.$refs['formValidate'].validate(valid => {
                if (valid) {
                    
                }
            })
        },
        cancelBtn() {
            this.$refs['formValidate'].resetFields();
            this.isEdit = false;
        }
    },
};
</script>
<style scoped>
/deep/.ivu-form-item-label {
    justify-content: flex-start!important;
}
/deep/.ivu-input-icon {
    height: 40px!important;
    line-height: 40px!important;
}
</style>
<style lang="less" scoped>
    .content {
        padding: 20px;
    }

    .formBox {
        width: 100%;
        background: #fff;
        border-radius: 4px;
        box-shadow: 1px 1px 2px 0px rgba(153,182,199,0.2);
        padding: 5px 20px 1px;
        display: flex;
        flex-wrap: wrap;
        &-item {
            width: 200px;
            margin-right: 48px;
        }
    }
    .mt_15 {
        margin-top: 15px;
    }
    .mr_20 {
        margin-right: 20px;
    }
</style>
